<template>
  <div>
    <el-row style="height: 100%">
      <el-col v-if="!isNotic" :span="18" style="height: 100%; overflow: hidden">
        <div
          class="noScrollBar"
          v-if="isSearch == 'noSearch'"
          style="height: calc(100% - 90px); overflow: hidden auto"
        >
          <!--<div class="bottomTen">-->
            <!--<tagTitle-->
              <!--:title="'规章制度'"-->
              <!--:hasTag="1"-->
              <!--:hasMore="true"-->
              <!--:moreUrl="'/supervise/study'"-->
            <!--&gt;</tagTitle>-->
            <!--<comSwiper-->
              <!--v-loading="loadItem"-->
              <!--:type="'img'"-->
              <!--:proItem="items"-->
              <!--:isNav="1"-->
              <!--:thisSwiper="mySwiper1"-->
              <!--:swriperName="'mySwiper1'"-->
            <!--&gt;</comSwiper>-->
          <!--</div>-->
          <!--<div class="bottomTen">-->
            <!--<tagTitle :title="'数据指标'" :hasTag="1"></tagTitle>-->
            <!--<comSwiper-->
              <!--:type="'dom'"-->
              <!--v-loading="loadInd"-->
              <!--:proItem="indicator"-->
              <!--:isNav="0"-->
              <!--:thisSwiper="mySwiper2"-->
              <!--:swriperName="'mySwiper2'"-->
            <!--&gt;</comSwiper>-->
          <!--</div>-->
          <div class="bottomTen">
            <tagTitle :title="'智能分析'" :hasTag="1"></tagTitle>
            <div class="nav">
              <tab
                :type="'bg'"
                @otherSelect="handleSelect"
                :analysis="analysis"
              ></tab>
              <!--              <more></more>-->
            </div>
            <lines></lines>
            <div class="echartBox">
              <el-row>
                <el-col :span="12">
                  <div id="bar1"></div>
                </el-col>
                <el-col :span="12">
                  <div id="bar2"></div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div id="bar3"></div>
                </el-col>
              </el-row>
            </div>
          </div>
          <!--<div class="bottomTen" style="position: relative">-->
            <!--<div class="flexBox">-->
              <!--<tagTitle-->
                <!--style="max-width: 120px; min-width: 108px"-->
                <!--:title="'招标业务大厅'"-->
                <!--:hasTag="1"-->
              <!--&gt;</tagTitle>-->
              <!--<div class="nav absNav">-->
                <!--<tab-->
                  <!--:type="'bg'"-->
                  <!--@otherSelect="changeBidd"-->
                  <!--:analysis="bidBusinessTypeList"-->
                <!--&gt;</tab>-->
                <!--<i class="el-icon-full-screen" @click="showBusinessHall"></i>-->
              <!--</div>-->
            <!--</div>-->
            <!--<lines></lines>-->
            <!--<avue-crud :page.sync="bidPage"-->
              <!--@current-change="currentChange"-->
               <!--@size-change="sizeChange"-->
               <!--@refresh-change="refreshChange"-->
                <!--:table-loading="loading"-->
                <!--ref="crud"-->
                <!--@row-click="toDetail"-->
                <!--@on-load="onLoad"-->
                <!--:data="tableData"-->
                <!--:option="optionIndex"></avue-crud>-->
          <!--</div>-->
        </div>
        <div class="searchCont noScrollBar" v-show="isSearch == 'searchList'" style="height: calc(100% - 110px); overflow: hidden auto" >
          <company-list
            @showSearchResult="showSearchResult"
            @changeTp="changeTp"
            :companyList="companyList"
            :active="active"
            :searchActive="searchActive"
            @contactService="contactService"
            @openPdf="openPdf"
            :searchCont="searchCont"
            ref="companyList"
          ></company-list>
        </div>
        <div class="searchCont" v-if="isSearch == 'searchResult'">
          <company
            :showDetailType="showDetailType"
            :objectId="objectId"
            @goList="goList"
          ></company>
        </div>
        <div class="searchCont" v-if="isSearch == 'searchAnswer'">
          <company
            ref="company"
            :searchCont="searchCont"
            :showDetailType="'searchAnswer'"
            :answerDetail="recommend"
            @contactService="contactService"
          ></company>
        </div>
      </el-col>
      <el-col v-if="isNotic" :span="18" style="height: 100%; overflow: hidden">
        <notices
          :noticeData="noticeData"
          :cloNotice="cloNotice"
          :secondT="secondT"
          :thirdT="thirdT"
        ></notices>
      </el-col>
      <el-col
        v-if="isSearch == 'noSearch'"
        class="noScrollBar"
        :span="6"
        style="padding-left: 16px; height: 100%; overflow: hidden auto"
      >
        <div class="bottomTen">
          <tagTitle
            :title="'系统公告'"
            :hasTag="0"
            :hasMore="true"
            :moreUrl="'/infoAll/noticeInfo'"
          ></tagTitle>
          <lines></lines>
          <ul class="servicesInfo">
            <li
              v-for="(i, index) in noticeInfo"
              :key="i"
              @click="toNotice(i, index, noticeInfo, 'noticeInfo')"
            >
              <span class="infoTitle"><i></i>{{ i.title }}</span>
              <span class="infoDate">{{ subTen(i.releaseTime) }}</span>
            </li>
          </ul>
        </div>
        <div class="bottomTen">
          <tagTitle :title="'滚动新闻'" style="margin-bottom: 10px"></tagTitle>
          <div class="nav">
            <tab
              style="margin-top: 0"
              class="tabClass"
              :type="'border'"
              @otherSelect="otherSelect"
              :analysis="other"
            ></tab>
            <more :moreUrl="'/infoAll/newsInfo'"></more>
          </div>
          <lines style="margin-bottom: -16px"></lines>
          <comSwiper
            v-loading="loadNew"
            :type="'image'"
            :proItem="item3"
            :isNav="0"
            :thisSwiper="mySwiper3"
            :swriperName="'mySwiper3'"
            @toNotice="toNotice"
          ></comSwiper>
          <ul class="servicesInfo">
            <li
              v-for="(i, index) in servicesInfo"
              :key="i"
              @click="toNotice(i, index, servicesInfo, '新闻资讯')"
            >
              <span class="infoTitle"><i></i>{{ i.title }}</span>
              <span class="infoDate">{{ subTen(i.releaseTime) }}</span>
            </li>
          </ul>
        </div>
        <div class="bottomTen">
          <tagTitle :title="'规章制度'" style="margin-bottom: 10px"></tagTitle>
          <div class="nav">
            <tab
              style="margin-top: 0"
              class="tabClass"
              :type="'border'"
              @otherSelect="lawSelect"
              :analysis="lawTypeList"
            ></tab>
            <more :moreUrl="'/infoAll/lawInfo'"></more>
          </div>
          <lines></lines>
          <ul class="servicesInfo">
            <li
              v-for="(i, index) in lawInfo"
              :key="i"
              @click="toNotice(i, index, lawInfo, '规章制度')"
            >
              <span class="infoTitle"><i></i>{{ i.title }}</span>
              <span class="infoDate">{{ subTen(i.releaseTime) }}</span>
            </li>
          </ul>
        </div>
        <!--<div class="bottomTen">-->
          <!--<tagTitle-->
            <!--:title="'工具下载'"-->
            <!--style="margin-bottom: 10px"-->
            <!--:hasTag="0"-->
            <!--:hasMore="false"-->
          <!--&gt;</tagTitle>-->
          <!--<div class="nav">-->
            <!--<tab-->
              <!--style="margin-top: 0"-->
              <!--class="tabClass"-->
              <!--:type="'border'"-->
              <!--@otherSelect="downSelect"-->
              <!--:analysis="downTypeList"-->
            <!--&gt;</tab>-->
            <!--<more :moreUrl="'/infoAll/fileDown'"></more>-->
          <!--</div>-->
          <!--<lines></lines>-->
          <!--<ul class="servicesInfo downInfo">-->
            <!--<li v-for="i in downList" :key="i">-->
              <!--<span class="infoTitle"><i></i>{{ i.title }}</span>-->
              <!--<span class="infoDate">{{ subTen(i.releaseTime) }}</span>-->
              <!--<span class="downTime"-->
                <!--&gt;<a-->
                  <!--href=""-->
                  <!--download="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00745-2844.jpg"-->
                  <!--&gt;<img src="../../../public/img/icon/cloud.png" alt="" />{{-->
                    <!--i.readNum-->
                  <!--}}</a-->
                <!--&gt;</span-->
              <!--&gt;-->
            <!--</li>-->
          <!--</ul>-->
        <!--</div>-->
      </el-col>
      <el-col
        v-if="isSearch != 'noSearch'"
        class="noScrollBar"
        :span="6"
        style="padding-left: 16px; height: 100%; overflow: hidden auto"
      >
        <div class="bottomTen">
          <tagTitle
            :title="'相关搜索'"
            :hasTag="0"
            :hasMore="false"
            :moreUrl="'/infoAll/noticeInfo'"
          ></tagTitle>
          <lines></lines>
          <ul class="servicesInfo">
            <li
              v-for="(i, index) in relateList"
              :key="index"
              @click="setSearch(i)"
            >
              <span class="infoTitles"
                ><i>{{ index + 1 }}</i
                ><span>{{ i }}</span></span
              >
              <!-- <span class="infoDate">{{i.date}}</span> -->
            </li>
          </ul>
        </div>
        <div class="bottomTen">
          <tagTitle
            :title="'热门搜索'"
            :hasTag="0"
            :hasMore="false"
            :moreUrl="'/infoAll/noticeInfo'"
          ></tagTitle>
          <lines></lines>
          <ul class="servicesInfo">
            <li v-for="(i, index) in hotList" :key="i" @click="setSearch(i)">
              <span class="infoTitles"
                ><i>{{ index + 1 }}</i
                ><span>{{ i }}</span></span
              >
              <!-- <span class="infoDate">{{i.date}}</span> -->
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
    <el-drawer
      :show-close="false"
      :visible.sync="isBusinessHall"
      size="100%"
      :modal="false"
    >
      <template slot="title" class="bottomTen">
        <div class="flexBox">
          <tagTitle
            style="max-width: 120px; min-width: 108px"
            :title="'业务大厅'"
            :hasTag="1"
          ></tagTitle>
          <div class="nav absNav">
            <tab
              :type="'bg'"
              @otherSelect="changeBidd"
              :analysis="bidBusinessTypeList"
            ></tab>
            <i class="el-icon-close" @click="closeBusinessHall"></i>
          </div>
        </div>
      </template>
      <div style="padding: 20px" class="bottomTen">
        <!--        <lines></lines>-->
        <avue-crud :page.sync="bidPage"
              @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
                :table-loading="loading"
                ref="crud"
                @row-click="toDetail"
                @on-load="onLoad"
                :data="tableData"
                :option="optionIndex">
        </avue-crud>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import tagTitle from "../../page/tagTitle";
import comSwiper from "../../page/comSwiper";
import more from "../../page/more";
import tab from "../../page/tab";
import lines from "../../page/line";
import { bar } from "../../util/bar";
import { line } from "../../util/line";
import notices from "../notice/notice";
import {
  getNoticeList,
  getRelateList,
  getHotList,
  getNewList,
  getDownList,
  getNewsSwiper,
  getIndicator,
} from "@/api/index/index";
import { getDictionary } from "../../api/system/dict";
import { getBizDictionary } from "../../api/system/dictbiz";

export default {
  data() {
    return {
      num: Math.floor(((document.body.clientWidth - 117) * (2 / 3)) / 200),
      isBusinessHall: false,
      searchCont: "",
      hotList: [],
      relateList: [],
      optionIndex: {
        align: "left",
        menu: false,
        border:false,
        column: [
          {
                        label: "公告名称",
                        prop: "announcementName",
                        span: 24,
                        row: true,
                        search: false,
                        rules: [{
                            required: true,
                            message: "请输入通知标题",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "发布时间",
                        prop: "releaseTime",
                        type: "date",
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd",
                        searchRange:true,
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
                        search: false,
                    },
        ],
        refreshBtn: false,
        columnBtn: false,
        addBtn: false,
      },
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      bidPage:{
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      scrollTop: 0,
      activeNames: ["1", "2", "3", "5"],
      logActiveNames: ["22"],
      items: [],
      item3: [],
      indicator: [],
      mySwiper1: {
        // pagination: {
        //   el: '.swiper-pagination',    //与slot="pagination"处 class 一致
        //   clickable: true,            //轮播按钮支持点击
        // },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        slidesPerView: Math.floor(
          ((document.body.clientWidth - 117) * (3 / 4)) / 200
        ),
        spaceBetween: 16,
        loop: true,
        autoplay: {
          delay: 5000,
          speed: 300,
        }, //可设置数值来指定播放速度
        // 切换图片速度
      },
      mySwiper2: {
        pagination: {
          el: ".swiper-pagination", //与slot="pagination"处 class 一致
          clickable: true, //轮播按钮支持点击
        },
        slidesPerView: Math.floor(
          ((document.body.clientWidth - 117) * (3 / 4)) / 200
        ),
        spaceBetween: 16,
        loop: true,
        autoplay: {
          delay: 5000,
          speed: 300,
        },
      },
      mySwiper3: {
        pagination: {
          el: ".swiper-pagination", //与slot="pagination"处 class 一致
          clickable: true, //轮播按钮支持点击
        },
        // navigation: {
        //   nextEl: '.swiper-button-next2',
        //   prevEl: '.swiper-button-prev2',
        // },
        slidesPerView: 1,
        spaceBetween: 16,
        loop: true,
        autoplay: {
          delay: 5000,
          speed: 300,
        },
      },
      servicesInfo: [],
      downList: [],
      downTypeList: [],
      lawTypeList: [],
      noticeInfo: [],
      lawInfo: [],
      analysis: [
        {
          id: 12313,
          name: "数据统计",
        },
        // {
        //   id: 12314,
        //   name: "节资分布",
        // },
        // {
        //   id: 12312,
        //   name: "采购排名",
        // },
      ],
      other: [],
      bidBusinessTypeList:[],//公告类型
      tableData: [],
      isNotic: false,
      noticeData: {},
      biddAcID: "同志公告",
      isSearch: "noSearch", //是否为搜索展示页面
      servicesInfoName: "",
      lawInfoName: "",
      secondT: "",
      thirdT: "",
      companyList: [],
      recommend: {},
      showDetailType: "", //详情页面的类型
      detailDataID: null, //详情类型
      objectId: null, //详情类型
      newsList: [], //获取所有新闻列表
      lawsList: [], //获取所有法规列表
      toolsList: [], //获取所有下载列表
      loadItem: false,
      loadNew: false,
      loadInd: false,
      pdfUrl: "", //pdf地址
    };
  },
  watch: {
    noticeData: {
      handler() {},
      deep: true,
      immediate: true,
    },
  },
  inject: ["index"],
  components: {
    tagTitle,
    comSwiper,
    more,
    tab,
    lines,
    notices,

  },
  name: "wel",
  mounted() {
    let th = this;
    this.$nextTick(() => {
      th.barInit();
      //th.getIndicator();
      th.isSearch = "noSearch";
      th.getNoticeList();
      th.getNewsSwiper();
    });
  },
  computed: {
    ...mapGetters(["userInfo"]),
    ...mapState({ showCollapse: (state) => state.common.showCollapse }),
  },
  methods: {

    changeTp(id) {
      this.tpID = id;
    },
    goList(v) {
      this.isSearch = "searchList";
    },
    subTen(time) {
      return time ? time.substr(5, 5) : "";
    },
    down() {},
    // getBidBusTypeList(){
    //   getDictionary(announcement_type).then(res=>{
    //     this.bidBusinessTypeList=
    //   })

    // },
    changeBidd(v,item) {
      this.index.businessHallId = v;
      this.onLoad(this.bidPage,item?item.name:v)
      // this.biddAcID = item.name
    },
    toDetail(row){
      this.$router.push({
        path:'/desk/bidBusinessHallDetail',
        query:{
          id:row.id
        }
      })
    },
    onLoad(page, v){
      this.loading=true
    },
    sizeChange(val) {
      this.page1.currentPage = 1;
      this.page1.pageSize = val;
      this.$message.success("行数" + val);
    },
    currentChange(val) {
      this.page1.currentPage = val;
      this.$message.success("页码" + val);
    },
    handleScroll(e) {
      this.scrollTop = e.target.scrollTop;
    },
    handleChange(val) {
      window.console.log(val);
    },
    handleSelect(ind) {
      this.barInit();
    },
    otherSelect(ind, item) {
      let val = item ? item.name : this.newsList[ind].name;
      this.servicesInfo = this.newsList.filter((i) => i.category == val);
    },
    lawSelect(ind, item) {
      let val = item ? item.name : this.lawsList[ind].name;
      this.lawInfo = this.lawsList.filter((i) => i.category == val);
    },
    downSelect(ind, item) {
      let val = item ? item.name : this.toolsList[ind].name;
      this.downList = this.toolsList.filter((i) => i.category == val);
    },
    dom(id) {
      let linearBarDom = document.getElementById(id)
        ? this.$echarts.getInstanceByDom(document.getElementById(id)) || null
        : null; //有的话就获取已有echarts实例的DOM节点。
      if (linearBarDom == null) {
        // 如果不存在，就进行初始化。
        linearBarDom = this.$echarts.init(document.getElementById(id));
      } else {
        linearBarDom.clear();
      }
      return linearBarDom;
    },
    barInit() {
      let th = this;
      setTimeout(function () {
        let barIt = th.dom("bar1");
        let barIt3 = th.dom("bar3");
        let barIt2 = th.dom("bar2");
        let data = ["电表质量", "并网性能"];
        let data1 = [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ];
        let data13 = [
          "第一公司",
          "第二公司",
          "第一公司",
          "第一公司",
          "第一公司",
          "第一公司",
          "第一公司",
          "第一公司",
          "第一公司",
          "第一公司",
          "第一公司",
          "第一公司",
        ];
        let data2 = [
          2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
        ];
        let data3 = [
          2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,
        ];
        let data4 = [
          0.2, 0.8, 0.1, 1.2, 1.7, 0.7, 9.6, 4.2, 1.7, 1.8, 0.6, 2.3,
        ];

        barIt.setOption(bar(data, data1, data2, data3, data4), true);
        barIt3.setOption(bar(data, data13, data2, data3, data4), true);
        barIt2.setOption(line(data1, data2, data4), true);
      }, 600);
    },
    async getNoticeList() {
      let th = this;
      let newsType = getDictionary({ code: "news_category" });
      let lawsType = getDictionary({ code: "file_category" });
      let toolsType = getDictionary({ code: "tool_category" });
      let bidType = getBizDictionary({code:'announcement_type'});
      let notice = getNoticeList(this.page.currentPage, this.page.pageSize);
      let news = getNewList(this.page.currentPage, this.page.pageSize);
      let tools = getDownList(this.page.currentPage, this.page.pageSize);
      let list = [
        this.other,
        this.lawTypeList,
        this.downTypeList,
        this.bidBusinessTypeList,
        this.noticeInfo,
        this.newsList,
        this.lawsList,
        this.toolsList,
      ];
      Promise.all([
        newsType,
        lawsType,
        toolsType,
        bidType,
        notice,
        news,
        tools,
      ]).then((res) => {
        res.forEach((item, index) => {
          let data = item.data.data;
          if (index < 4) {
            data.forEach((i) => {
              list[index].push({
                name: i.dictKey,
                label: i.dictValue,
              });
            });
            if(index==3){
              list[index].unshift({
                name:'',
                label:'全部'
              })
            }
          } else{
            data.records.forEach((i) => {
              list[index].push(i);
            });
          }
        });
        this.changeBidd(this.bidBusinessTypeList[0].name);
        this.servicesInfo = this.newsList.filter(
          (i) => i.category == this.other[0].name
        );
        this.lawInfo = this.lawsList.filter(
          (i) => i.category == this.lawTypeList[0].name
        );
        this.downList = this.toolsList.filter(
          (i) => i.category == this.downTypeList[0].name
        );
      });
    },
    toNotice(item, index, list, str) {
      this.noticeData = Object.assign({}, this.noticeData, {
        current: item,
        index: index,
        list: list,
      });
      if (str == "noticeInfo") {
        this.secondT = "通知公告";
        this.thirdT = "公告";
      } else {
        this.secondT = str;
        this.thirdT = item.categoryName;
      }
      this.isNotic = this.isNotic ? this.isNotic : !this.isNotic;
    },
    cloNotice() {
      this.isNotic = false;
      this.$nextTick(() => {
        this.barInit();
      });
    },
    closeBusinessHall() {
      this.isBusinessHall = false;
      this.index.collIt = true;
    },
    showBusinessHall() {
      this.isBusinessHall = true;
      this.index.collIt = false;
    },
    changeIsSearch(v, list, cont, searchActive, recommend, active) {
      debugger
      this.searchCont = cont;
      this.searchActive = searchActive;
      this.active = active;
      this.isSearch = v;
      this.companyList = list;
      this.recommend = recommend;
      this.$nextTick(() => {
        if (this.isSearch == "searchAnswer") {
          this.$refs.company.turnToVoice(recommend.answer);
          this.$refs.company.getFileLaw();
          this.getHotList();
          this.getRelateList();
        } else if (this.isSearch == "noSearch") {
          this.barInit();
        } else {
          this.getHotList();
          this.getRelateList();
          this.$nextTick(() => {
            this.$refs.companyList.getFileLaw();
          });
        }
      });
    },
    //打开预览文件
    openPdf(url) {
      this.pdfUrl = url;
      this.isSearch = "pdfview";
    },
    //关闭预览文件
    closePdf() {
      this.isSearch = "searchList";
    },
    showSearchResult(item, con, type, id) {
      debugger
      this.isSearch = "searchResult";
      this.showDetailType = type;
      this.searchActive = id;
      this.objectId = item;
      this.searchCont = con;
    },
    getHotList() {
      let values = {
        top_num: 10,
      };
      getHotList(values).then((res) => {
        let data = JSON.parse(res.data);
        this.hotList = data.data;
      });
    },
    getRelateList() {
      let values = {
        text: this.searchCont,
        num: 10,
      };
      getRelateList(values).then((res) => {
        let data = JSON.parse(res.data);
        this.relateList = data.data;
      });
    },
    setSearch(item) {
      this.searchCont = item;
      this.$refs.tabSearchRef.setSearchCont(this.searchCont);
    },
    contactService() {
      this.index.intellCustSer("chat");
    },
    getNewsSwiper() {
      this.loadNew = true;
      getNewsSwiper().then((res) => {
        this.loadNew = false;
        this.item3 = res.data.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-font-size {
  font-size: 14px;
}
.box {
  width: 50%;
  margin: 50px auto;
}
.img-box {
  width: 100%;
  position: relative;
  z-index: 1;
}
.img-box img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  margin: auto;
  z-index: -1;
  *zoom: 1;
}
.img-box:before {
  content: "";
  display: inline-block;
  padding-bottom: 100%;
  width: 0.1px; /*必须要有数值，否则无法把高度撑起来*/
  vertical-align: middle;
}
.servicesInfo {
  padding: 0;
  margin: 0 0;
  > li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    .infoTitle {
      font-weight: 400;
      color: #666666;
      position: relative;
      padding-left: 15px;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
      i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #d8d8d8;
        position: absolute;
        top: 50%;
        left: 0;
        margin-top: -3px;
      }
      // .listIndex {
      //     display: block;
      //     width: 30px;
      //     height: 30px;
      //     border-radius: 50%;
      //     margin-right: 10px;
      //     line-height: 30px;
      //     text-align: center;
      // }
    }
    .infoTitles {
      font-weight: 400;
      color: #666666;
      // position: relative;
      // padding-left: 15px;
      // flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
      display: flex;
      i {
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        margin: auto 5px 0 auto;
        display: block;
        border-radius: 50%;
        background-color: #999;
        color: #fff;
      }
      span {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      // .listIndex {
      //     display: block;
      //     width: 30px;
      //     height: 30px;
      //     border-radius: 50%;
      //     margin-right: 10px;
      //     line-height: 30px;
      //     text-align: center;
      // }
    }
    .infoDate {
      width: 50px;
      white-space: nowrap;
    }
  }
  & > li:last-child {
    margin-bottom: 0;
  }
}
.servicesInfo li:nth-child(1) .infoTitles i {
  background-color: rgb(245, 69, 69) !important;
}
.servicesInfo li:nth-child(2) .infoTitles i {
  background-color: rgb(255, 133, 71) !important;
}
.servicesInfo li:nth-child(3) .infoTitles i {
  background-color: rgb(255, 172, 56) !important;
}
.downInfo {
  > li {
    display: flex;
    justify-content: space-around;
    margin-bottom: 12px;
    cursor: pointer;
    .downTime {
      cursor: pointer;
      width: 84px;
      margin: auto;
      img {
        width: 16px;
        margin-left: 18px;
        margin-right: 6px;
        vertical-align: bottom;
      }
    }
  }
}
.bottomTen {
  .nav {
    position: relative;
  }
  .tabClass {
    width: calc(100% - 60px);
    white-space: nowrap;
    overflow: auto;
    &::-webkit-scrollbar {
      display: none;
    }
  }
  .flexBox {
    display: flex;
    position: relative;
    justify-content: space-between;
    /*padding-right: 35px;*/
    .navTop {
      margin-top: 0;
    }
  }
  .absNav {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    .more {
      position: relative !important;
    }
    > i {
      line-height: 28px;
      cursor: pointer;
    }
  }
}
.echartBox {
  .el-col,
  .el-row {
    height: 200px;
  }
  #bar1,
  #bar2 {
    display: inline-block;
    width: 98%;
  }
  #bar1,
  #bar2,
  #bar3 {
    height: 200px;
  }
}
.serContT {
  border: 1px solid #fc8d28;
}
.serContB {
  border: 1px solid #1c7df0;
}
.container {
  display: flex;
  background: rgba(0, 0, 0, 0.05);
  width: 100%;
  height: 72px;
  margin-top: 12px;
  border-radius: 4px;
  > div {
    flex: 1;
    .bottomBorDiv {
      border: 1px solid #e6e6e6;
      border-left: none;
      border-right: none;
    }
    p {
      height: 36px;
      line-height: 36px;
      font-size: 13px;
      font-weight: 400;
      color: #34404b;
      text-align: center;
    }
  }
  .midDiv {
    border: 1px solid #e6e6e6;
    border-bottom: none;
    border-top: none;
  }
  .cImgB {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 12px;
    img {
      width: 28px;
    }
    p {
      line-height: 36px;
      font-size: 12px;
      font-weight: 500;
      color: #fc8d28;
    }
  }
}
.isFix {
  position: fixed;
  top: 74px;
  width: 68%;
  z-index: 2;
  background: #fff;
  border-bottom: 10px solid #f0f2f5;
}
.table-name-p {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.searchCont {
  height: calc(100% - 100px);
  background: #fff;
  border-radius: 12px;
}
</style>
<style lang="scss">
.el-table {
  color: #666;
  thead {
    color: #34404b;
  }
}
.bottomTen .avue-crud__menu {
  display: none;
}
.el-drawer__header {
  margin: 0;
  padding: 10px 10px 0 10px;
  .el-icon-close:before {
    /*content:"\e620"*/
  }
  p {
    margin: 0;
  }
  .nav {
    /*justify-content: space-between;*/
    position: relative;
  }
  .flexBox {
    display: flex;
    position: relative;
    justify-content: space-between;
    /*padding-right: 35px;*/
    .navTop {
      margin-top: 0;
    }
  }
  .absNav {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    .more {
      position: relative !important;
    }
    > i {
      line-height: 28px;
      cursor: pointer;
    }
  }
}
</style>

